<template>
<div>
    <div>
        <div>
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="电影院:">
            <el-select v-model="value" placeholder="请选择">
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                >  
                </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="queryShowMovie()">查询</el-button>
          </el-form-item>
        </el-form>
        </div>
    </div>
  <el-table
    :data="mlist"
    style="width: 100%">
    <el-table-column type="expand">
      <template slot-scope="props">
        <el-form label-position="left" inline class="demo-table-expand">
          <el-form-item label="电影名称">
            <span>{{ props.row.mname }}</span>
          </el-form-item>
           <el-form-item label="演员">
            <span>{{ props.row.actor }}</span>
          </el-form-item>
          <el-form-item label="演员照片">
             <template>
                 <el-image
                    style="width: 100px; height: 100px"
                    :src="props.row.aimg">
                    </el-image>
             </template>
            </el-form-item>
          <el-form-item label="影片时长">
            <span>{{ props.row.movieDuration }}</span>
          </el-form-item>
          <el-form-item label="导演">
            <span>{{ props.row.director }}</span>
          </el-form-item>
          <el-form-item label="奖项">
            <span>{{ props.row.reward }}</span>
          </el-form-item>
          <el-form-item label="观看人数">
            <span>{{ props.row.viewerCount }}</span>
          </el-form-item>
          <el-form-item label="发行日期">
            <span>{{ props.row.releaseDate }}</span>
          </el-form-item>
          <el-form-item label="电影 ID">
            <span>{{ props.row.id }}</span>
          </el-form-item>
          <el-form-item label="国家">
            <span>{{ props.row.country }}</span>
          </el-form-item>
          <el-form-item label="电影分类">
            <span>{{ props.row.type }}</span>
          </el-form-item>
          <el-form-item label="电影海报">
             <template>
                 <el-image
                    style="width: 100px; height: 100px"
                    :src="props.row.img">
                    </el-image>
             </template>
            </el-form-item>
          <el-form-item label="电影简介">
          <span>{{ props.row.detail }}</span>
          </el-form-item>
          </el-form>
        </template>
    </el-table-column>
    <el-table-column
      label="电影ID"
      prop="id">
    </el-table-column>
    <el-table-column
      label="电影名称"
      prop="mname">
    </el-table-column>
    <el-table-column
      label="演员"
      prop="actor">
    </el-table-column>
  </el-table>
  </div>
</template>

<style>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>

<script>
  export default {
    data() {
      return {
          id:'',
          value:'',
          mlist:[],
          options: [{
                value: '4',
                label: '万达影城(松江店)'
                }, {
                value: '7',
                label: '大地影院(华润万家大华店)'
                }, {
                value: '8',
                label: '万达影城(周浦万达广场店)'
                }, {
                value: '9',
                label: '太平洋影城(杭州下沙店)'
                },{
                value: '10',
                label: '万达广场(上海周浦店)'
                },{
                value: '11',
                label: '万达影城(虹桥南丰城南区)'
                },{
                value: '12',
                label: '4和平影都(来福士广场店)'
                },{
                value: '13',
                label: '保利国际影城(上海世博店)'
                },{
                value: '14',
                label: '大地影院(华润万家大华店)'
                }, {
                value: '15',
                label: '万达广场周浦店停车场(出入口)'
                },
                {
                value: '16',
                label: '万达影城(宝山万达广场店)'
                },
                {
                value: '17',
                label: '和平影都(来福士广场店)'
                },
                {
                value: '18',
                label: '万达影城(宝山万达广场店)'
                },
                {
                value: '20',
                label: '万达影城(周浦万达广场店)'
                },
                {
                value: '21',
                label: '万达影城(周浦万达广场店)'
                },
                {
                value: '22',
                label: '万达影城(江桥万达广场店)'
                },
            ],
            tableData: [{
            id: '12987122',
            name: '好滋好味鸡蛋仔',
            category: '江浙小吃、小吃零食',
            desc: '荷兰优质淡奶，奶香浓而不腻',
            address: '上海市普陀区真北路',
            shop: '王小虎夫妻店',
            shopId: '10333'
            }, {
            id: '12987126',
            name: '好滋好味鸡蛋仔',
            category: '江浙小吃、小吃零食',
            desc: '荷兰优质淡奶，奶香浓而不腻',
            address: '上海市普陀区真北路',
            shop: '王小虎夫妻店',
            shopId: '10333'
            }]
        }
    },
    methods:{
        // queryAllCinema(){           //查询所有的影院
        //     this.$axios.get("http://localhost:8080/admin/cinema/list")
        //     .then(data=>{
        //         //console.log(data.data.data.list)
        //         let lists=data.data.data.list;
        //         if(data.data.code==200){
        //             for(let i=0;i<lists.length;i++){
        //                 this.value=lists[i].id
        //                 this.label=lists[i].cname
        //             }
        //         }

        //     })
        // },
        queryShowMovie(){           
            console.log(this.value);
            this.$axios.get("http://localhost:8080/admin/movie/queryShowMovie",{
                params:{
                    id:this.value
                }
            })
            .then(data=>{
                console.log(data)
                if(data.data.code==200){
                    this.mlist=data.data.data;                    
                }                
            })
        }
    },
    mounted:function(){
        this.queryShowMovie();
    }
  }
</script>